Amazon PayV2決済フロー
Amazon Payが提供する開発者向け情報ページも合わせて参照ください。
都度決済、利用承諾の流れ
決済フロー
都度決済または利用承諾の流れを以下に記載します。
sequenceDiagram
お客様->>加盟店様: カート・利用申込画面に進む
(購入・申込処理開始) 加盟店様-->>お客様: 1.カート・利用申込画表示
AmazonPayボタン表示 participant 当サービス お客様->>Amazon: 2.AmazonPayボタンクリック Amazon-->>お客様: Amazonログイン画面表示 Note right of Amazon: Amazonログイン済の場合は省略 お客様->>Amazon: 3.Amazonログイン Amazon-->>お客様: Amazon配送先/お支払い方法選択画面表示 お客様->>Amazon: 4.配送先/お支払い方法選択 Amazon-->>加盟店様: 5.加盟店様確認画面URLにリダイレクト 加盟店様->>当サービス: 6.住所情報取得 当サービス->>Amazon: Amazon-->>当サービス: 当サービス-->>加盟店様: 加盟店様-->>お客様: 加盟店様確認画面表示 お客様->>Amazon: 7.配送先/お支払い方法の再選択 Amazon-->>加盟店様: 加盟店様確認画面URLにリダイレクト 加盟店様->>当サービス:住所情報取得 当サービス->>Amazon: Amazon-->>当サービス: 当サービス-->>加盟店様: 加盟店様-->>お客様:決済確認画面表示 お客様->>加盟店様:8.決済・申込ボタン押下 加盟店様->>当サービス:9.取引登録 当サービス-->>加盟店様: 加盟店様->>当サービス: 10.決済実行 当サービス->>Amazon: Amazon-->>当サービス: 当サービス-->>加盟店様: 加盟店様-->>お客様: お客様->>当サービス: 11.支払手続き開始 当サービス->>お客様: お客様->>Amazon: 12.Amazon画面にリダイレクト Amazon-->>当サービス: 当サービス->>Amazon: 13.決済・利用承諾完了処理 Amazon-->>当サービス: Amazon-->>お客様: お客様宛てご利用通知メール送信 当サービス-->>加盟店様: 結果通知 当サービス-->>お客様: 決済結果戻しURLにリダイレクト お客様->>加盟店様: 14.決済結果受信 加盟店様-->>お客様: 決済・利用申込完了画面表示
(購入・申込処理開始) 加盟店様-->>お客様: 1.カート・利用申込画表示
AmazonPayボタン表示 participant 当サービス お客様->>Amazon: 2.AmazonPayボタンクリック Amazon-->>お客様: Amazonログイン画面表示 Note right of Amazon: Amazonログイン済の場合は省略 お客様->>Amazon: 3.Amazonログイン Amazon-->>お客様: Amazon配送先/お支払い方法選択画面表示 お客様->>Amazon: 4.配送先/お支払い方法選択 Amazon-->>加盟店様: 5.加盟店様確認画面URLにリダイレクト 加盟店様->>当サービス: 6.住所情報取得 当サービス->>Amazon: Amazon-->>当サービス: 当サービス-->>加盟店様: 加盟店様-->>お客様: 加盟店様確認画面表示 お客様->>Amazon: 7.配送先/お支払い方法の再選択 Amazon-->>加盟店様: 加盟店様確認画面URLにリダイレクト 加盟店様->>当サービス:住所情報取得 当サービス->>Amazon: Amazon-->>当サービス: 当サービス-->>加盟店様: 加盟店様-->>お客様:決済確認画面表示 お客様->>加盟店様:8.決済・申込ボタン押下 加盟店様->>当サービス:9.取引登録 当サービス-->>加盟店様: 加盟店様->>当サービス: 10.決済実行 当サービス->>Amazon: Amazon-->>当サービス: 当サービス-->>加盟店様: 加盟店様-->>お客様: お客様->>当サービス: 11.支払手続き開始 当サービス->>お客様: お客様->>Amazon: 12.Amazon画面にリダイレクト Amazon-->>当サービス: 当サービス->>Amazon: 13.決済・利用承諾完了処理 Amazon-->>当サービス: Amazon-->>お客様: お客様宛てご利用通知メール送信 当サービス-->>加盟店様: 結果通知 当サービス-->>お客様: 決済結果戻しURLにリダイレクト お客様->>加盟店様: 14.決済結果受信 加盟店様-->>お客様: 決済・利用申込完了画面表示
フローの説明
- 加盟店様はAmazon Payボタンを表示します。
- お客様がAmazon Payボタンを押下します。
- お客様がAmazonアカウントでログインします。
- お客様が決済に使用するクレジットカード、配送先を選択します。
- 加盟店様の確認画面に遷移します。
- (任意)加盟店様は必要に応じて確認画面に表示する住所情報を取得します。
- (任意)お客様が決済に使用するクレジットカード、配送先を選択し直します。
選択後、再度加盟店様の確認画面に遷移するので、必要に応じて住所情報を取得します。 - お客様は決済・利用申込を行います。
- 加盟店様は当サービスの取引登録(EntryTranAmazonpay)を行います。
- 加盟店様は当サービスの決済実行(ExecTranAmazonpay)を行います。
- 加盟店様はお客様を当サービスの支払手続き開始IF(AmazonpayStart)に誘導します。
- お客様のブラウザ上から当サービスの支払手続き開始IF(AmazonpayStart)が行われ、Amazon画面を表示します。
- 当サービスがAmazonに対して決済・利用承諾完了処理を行います。
- 当サービスが加盟店様の決済結果戻しURLに決済・利用申込結果を返却します。
画面遷移イメージ
画面遷移イメージを以下に記載します。
Amazon Payボタン
加盟店様は、Amazonが提供するJavaScriptを利用し、Amazon Payボタンを実装する必要があります。
詳細についてはAmazonの開発者向け情報ページを参照ください。
サンプル
<body>
<div id="AmazonPayButton"></div>
<script src="https://static-fe.payments-amazon.com/checkout.js(※1)"></script>
<script type="text/javascript" charset="utf-8">
amazon.Pay.renderButton('#AmazonPayButton', {
// set checkout environment
merchantId: 'merchant_id(※2)',
ledgerCurrency: 'JPY(※3)',
sandbox: true(※4),
// customize the buyer experience
checkoutLanguage: 'ja_JP(※5)',
productType: 'PayAndShip(※6)',
placement: 'Cart(※7)',
buttonColor: 'Gold(※8)',
// configure Create Checkout Session request
createCheckoutSessionConfig: {
payloadJSON: payload(※9), // string generated in step 2
signature: 'xxxx(※10)', // signature generated in step 3
publicKeyId: 'xxxxxxxxxx(※11)'
}
});
</script>
</body>
htmlには下記項目をセットします。
項目名 | 設定値 |
---|---|
(※1)Amazon JavaScript URL | Amazon Payボタンを表示するために必要なJavaScriptのURLになります。 |
(※2)merchantId | Amazon出品者IDを設定します。 |
(※3)ledgerCurrency | 決済で使用する通貨コードを設定します。 |
(※4)sandbox | AmazonのSandBox環境に接続する場合はtrue、商用環境に接続する場合はfalseを設定します。 |
(※5)checkoutLanguage | Amazonのページの表示言語を設定します。 |
(※6)productType | Amazonログイン後の形式を設定します。 ・配送先を使う場合は「PayAndShip」を設定してください。 ・配送先を使わない場合は「PayOnly」を設定してください。 ※弊社管理画面の設定項目「AmazonPay住所使用フラグ」は Amazon Pay V2では適用されませんのでご注意ください。 ・ログインのみ行なう場合は「SignIn」を設定してください。 |
(※7)placement | Amazon Payボタンを表示するページを設定します。 |
(※8)buttonColor | Amazon Payボタンの配色を設定します。 |
(※9)payload | 後続の処理に必要な設定文字列を設定します。 弊社管理画面(ショップ管理画面>都度決済>Amazon Pay>設定)にてAmazonPayボタン情報を取得し、 表示されたpayloadを設定してください。 |
(※10)signature | payloadから生成される署名を設定します。 payloadと同様に、表示されたsignatureを設定してください。 |
(※11)publicKeyId | Amazonセラーセントラルに表示されているPublic Key IDを設定してください。 |
項目名 | 設定値 |
---|---|
(※1)Amazon JavaScript URL | Amazon Payボタンを表示するために必要なJavaScriptのURLになります。 |
(※2)merchantId | Amazon出品者IDを設定します。 |
(※3)ledgerCurrency | 決済で使用する通貨コードを設定します。 |
(※4)sandbox | AmazonのSandBox環境に接続する場合はtrue、商用環境に接続する場合はfalseを設定します。 |
(※5)checkoutLanguage | Amazonのページの表示言語を設定します。 |
(※6)productType | Amazonログイン後の形式を設定します。 ・配送先を使う場合は「PayAndShip」を設定してください。 ・配送先を使わない場合は「PayOnly」を設定してください。 |
(※7)placement | Amazon Payボタンを表示するページを設定します。 |
(※8)buttonColor | Amazon Payボタンの配色を設定します。 |